<template>
	<div>
		<button @click="isShow = !isShow">点我显示/隐藏</button>
		<transition name="peiqi">
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>

<script>
export default {
	name:'App',
	data() {
		return {
			isShow:true
		}
	},
}
</script>

<style>
	h1{
		background-color: orange;
	}
	/* 定义一个动画 */
	@keyframes atguigu{
		0%{
			transform: translateX(-100%);
		}
		100%{
			transform: translateX(0%);
		}
	}
	.peiqi-enter-active{
		animation: atguigu 1s linear;
	}
	.peiqi-leave-active{
		animation: atguigu 1s linear reverse;
	}
</style>